<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <title>登录界面</title>

    <script src="/js/jquery-1.8.0.js"></script>
    <link href="/login9/css/default.css" rel="stylesheet"/>
    <!--必要样式-->
    <link href="/login9/css/styles.css" rel="stylesheet"/>
    <link href="/login9/css/demo.css" rel="stylesheet"/>
    <link href="/login9/css/loaders.css" rel="stylesheet"/>

    <link rel="stylesheet" href="/js/layer/theme/default/layer.css">
    <script src="/js/layer/layer.js"></script>
</head>
<script type="text/javascript">
    function toIndex() {
        location.href = "../view/toView?address=index";
    }

    var time = 60;
    var temp = null;

    function phoneyzm() {
        var phone = $("input[name='phone']").val();

        $.ajax({
            url: "../userLogin/phoneLogin",
            type: "POST",
            data: {phone: phone},
            success: function (res) {

                if (res.code == 4) {
                    layer.msg("<font color='red'>每个手机号 1 天内只能获取 3 次验证码</font>", {icon: 7, time: 3000});
                }
                if (res.code == 1) {
                    layer.msg("<font color='red'>每个手机号1分钟内只能获取一次验证码</font>", {icon: 7, time: 3000});
                }
                if (res.code == 2) {
                    layer.msg("<font color='green'>验证吗已发送,请注意查看手机</font>", {icon: 1, time: 3000})
                    temp = setInterval("aaa()", 1000);

                }
            }, error: function () {
                alert("AJAX访问失败了");
            }
        });
    }

    function aaa() {
        time--;
        $("#yzm").val("验证吗已发送!下次发送还要" + time + "秒");
        $("#yzm").prop("disabled", true);
        if (time <= 0) {
            $("#yzm").prop("disabled", false);
            $("#yzm").val("重新发送");
            clearInterval(temp);
            time = 60;
        }
    }

    function userPhoneLogin() {
        var  phone=$("input[name='phone']").val();
        var  yzm=$("input[name='yzm']").val();
        if(phone.trim()==""){
             layer.alert("<font color='red'>手机号不可为空!</font>");
             return ;
         }
        $.ajax({
            url:"../userLogin/userPhoneLogin",
            type:"POST",
            data:{phone:phone,yzm:yzm},
            success:function(res){
                if(res==1){
                    layer.msg("<font color='green'>登录成功</font>",{icon:1,time:3000})
                    location.href="<%=request.getContextPath()%>/show.jsp";
                }if(res==2){
                    layer.alert("<font color='red'>该手机号未绑定!</font>");
                }if(res==3){
                    layer.alert("<font color='red'>验证码输入有误!</font>");
                }if(res==4){
                    layer.alert("<font color='red'>该手机号已入黑名单!</font>");
                }
            },error:function(){
                alert("AJAX访问失败了");
            }
        })
    }
</script>
<body>

<div class='login'>

    <div class='login_title'>
        <span>手机号登录</span>
    </div>
    <div class='login_fields'>
        <div class='login_fields__user'>
            <div class='icon'>
                <img alt="" src="/login9/img/user_icon_copy.png"/>
            </div>
            <input name="phone" placeholder='手机号' maxlength="16" type='text' autocomplete="off"/>
            <div class='validation'>
                <img alt="" src="/login9/img/tick.png"/>
            </div>
        </div>
        <div class='login_fields__password'>
            <div class='icon'>
                <img alt="" src='/login9/img/lock_icon_copy.png'/>
            </div>
            <input name="yzm" placeholder='验证码' maxlength="16" type='text' autocomplete="off"/>
            <div class='validation'>
                <img alt="" src='/login9/img/tick.png'/>
            </div>
        </div>
        <div class='login_fields__password'>

            <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
                <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
            </div>
        </div>
        <div class='login_fields__submit'>
            <center>
                <input type='button' value='获取验证码' id="yzm" onclick="phoneyzm()"><br/><br/>

                <input type='button' id="nameLogin" value='登录' onclick="userPhoneLogin()"/>
                <br/><br/>
                <input type='button' value='使用账号登录' onclick="toIndex()"/>

            </center>
        </div>
    </div>
    <div class='success'>
    </div>

</div>
<div class='authent'>
    <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <p>认证中...</p>
</div>
<div class="OverWindows"></div>

<link href="/login9/layui/css/layui.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="/login9/js/jquery.min.js"></script>
<script type="text/javascript" src="/login9/js/jquery-ui.min.js"></script>
<script type="text/javascript" src='/login9/js/stopExecutionOnTimeout.js?t=1'></script>
<script type="text/javascript" src="/login9/layui/layui.js"></script>
<script type="text/javascript" src="/login9/js/Particleground.js"></script>
<script type="text/javascript" src="/login9/js/Treatment.js"></script>
<script type="text/javascript" src="/login9/js/jquery.mockjax.js"></script>
<script type="text/javascript">
    var canGetCookie = 0;//是否支持存储Cookie 0 不支持 1 支持
    var ajaxmockjax = 1;//是否启用虚拟Ajax的请求响 0 不启用  1 启用
    //默认账号


    var truelogin = "";
    var truepwd = "";


    $(document).keypress(function (e) {
        // 回车键事件
        if (e.which == 13) {
            $('#nameLogin').click();
        }
    });
    //粒子背景特效
    $('body').particleground({
        dotColor: '#E8DFE8',
        lineColor: '#133b88'
    });
    $('input[name="pwd"]').focus(function () {
        $(this).attr('type', 'password');
    });
    $('input[type="text"]').focus(function () {
        $(this).prev().animate({'opacity': '1'}, 200);
    });
    $('input[type="text"],input[type="password"]').blur(function () {
        $(this).prev().animate({'opacity': '.5'}, 200);
    });
    $('input[name="login"],input[name="pwd"]').keyup(function () {
        var Len = $(this).val().length;
        if (!$(this).val() == '' && Len >= 5) {
            $(this).next().animate({
                'opacity': '1',
                'right': '30'
            }, 200);
        } else {
            $(this).next().animate({
                'opacity': '0',
                'right': '20'
            }, 200);
        }
    });
    var open = 0;
    layui.use('layer', function () {

        //非空验证
        $('#nameLogin').click(function () {
            var login = $('input[name="userzhanghao"]').val();
            var pwd = $('input[name="userpassword"]').val();
            var code = $('input[name="ValidateNum"]').val();
            if (login == '') {
                ErroAlert('请输入您的账号');
            } else if (pwd == '') {
                ErroAlert('请输入密码');
            } else if (code == '' || code.length != 4) {
                ErroAlert('输入验证码');
            } else {
                //认证中..
                fullscreen();
                $('.login').addClass('test'); //倾斜特效
                setTimeout(function () {
                    $('.login').addClass('testtwo'); //平移特效
                }, 300);
                setTimeout(function () {
                    $('.authent').show().animate({right: -320}, {
                        easing: 'easeOutQuint',
                        duration: 600,
                        queue: false
                    });
                    $('.authent').animate({opacity: 1}, {
                        duration: 200,
                        queue: false
                    }).addClass('visible');
                }, 500);

                //登录
                var JsonData = {login: login, pwd: pwd, code: code};
                // console.log(JsonData)
                //此处做为ajax内部判断
                var url = "";
                $.ajax({
                    url: "../userLogin/zhangHaoAndPasswordLogin",
                    type: "POST",
                    async: false,
                    data: {userzhanghao: JsonData.login, userpassword: JsonData.pwd},
                    success: function (res) {
                        truelogin = res;
                        truepwd = res;
                    }, error: function () {
                        alert("AJAX访问异常");
                    }
                });
                if (3 == truelogin && 3 == truepwd && JsonData.code.toUpperCase() == CodeVal.toUpperCase()) {
                    url = "Ajax/Login";
                } else if (2 == truelogin && 2 == truepwd && JsonData.code.toUpperCase() == CodeVal.toUpperCase()) {
                    url = "Ajax/LoginBlackList";
                } else {
                    url = "Ajax/LoginFalse";
                }


                AjaxPost(url, JsonData,
                    function () {
                        //ajax加载中
                    },
                    function (data) {
                        //ajax返回
                        //认证完成
                        setTimeout(function () {
                            $('.authent').show().animate({right: 90}, {
                                easing: 'easeOutQuint',
                                duration: 600,
                                queue: false
                            });
                            $('.authent').animate({opacity: 0}, {
                                duration: 200,
                                queue: false
                            }).addClass('visible');
                            $('.login').removeClass('testtwo'); //平移特效
                        }, 2000);
                        setTimeout(function () {
                            $('.authent').hide();
                            $('.login').removeClass('test');
                            if (data.Status == 'ok') {
                                //登录成功
                                $('.login div').fadeOut(100);
                                $('.success').fadeIn(1000);
                                $('.success').html(data.Text);
                                //跳转操作
                                location.href = "../view/toView?address=show";
                            } else {
                                AjaxErro(data);
                            }
                        }, 2400);
                    })
            }
        })
    })
    var fullscreen = function () {
        elem = document.body;
        if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.requestFullScreen) {
            elem.requestFullscreen();
        } else {
            //浏览器不支持全屏API或已被禁用
        }
    }
    if (ajaxmockjax == 1) {
        $.mockjax({
            url: 'Ajax/Login',
            status: 200,
            responseTime: 500,
            responseText: {"Status": "ok", "Text": "登录成功<br /><br />欢迎回来"},
            response: function (settings) {
                layer.alert('<font color="red">来啦,老弟</font>', {
                    skin: 'layui-layer-molv' //样式类名  自定义样式
                    , closeBtn: 1    // 是否显示关闭按钮
                    , anim: 1 //动画类型
                    , btn: ['确定', '取消'] //按钮
                    , icon: 6
                })
            },

        });
        $.mockjax({
            url: 'Ajax/LoginFalse',
            status: 200,
            responseTime: 50,
            responseText: {"Status": "Erro", "Erro": "账号名或密码或验证码有误"},
            response: function (settings) {
                Code();
            },
        });
        $.mockjax({
            url: 'Ajax/LoginBlackList',
            status: 200,
            responseTime: 50,
            responseText: {"Status": "Erro", "Erro": "该账号已入黑名单!"},
            response: function (settings) {
                Code();
            },
        });
    }
</script>

</body>
</html>